<template>
    <div class="header">
        <div class="logo" @click="clickLogo">
            <img src="../../assets/logopic.jpg" alt="">
            <div class="text">
                <span>我是你大爷</span>
                博客系统
            </div>
        </div>

        <div class="nav">
            <!-- <a href="#" class="active">博客列表</a>
            <a href="#">添加博客</a> -->
            <router-link to="/show" >博客列表</router-link>
            <router-link to="/add">添加博客</router-link>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        clickLogo(){
            this.$router.push({path:"/"})
        }
    },
}
</script>
<style lang="less">
.header{
    height: 80px;
    background: #41b883;
    display: flex; /**盒子模型 */
    justify-content: space-between;
    padding: 0 30px;
    align-items: center;
}
.logo{
    display: flex;
    align-items: center;/**居中 */
    img{
        height: 60px;
    }
    .text{
        color: #fff;
        font-size: 20px;
        padding-left: 10px;
        span{
            display: block; /**转块元素 */
            font-size: 14px;
            opacity: 0.7;
        }
    }
}

.nav{
    display: flex; /**弹性盒模型 */

    a{
        display: block;/**转块元素 */
        border-radius: 5px;
        padding: 5px 20px;
        color: #fff;
        margin-left: 10px;
        &:hover,&.active{
            background: #fff;
            color: #41b883;
        }
    }
    
}


</style>
